<template>
  <div class="container">
    <div class="title">
      <span class="title1">模板管理</span>
      <el-button type="primary">新增模板</el-button>
    </div>
    <el-button class="right">导入模板</el-button>
    <el-button class="right">批量下载</el-button>
    <Table
      :table-column="tableColumn"
      :table-data="tableData"
      :has-selection="true"
      :height="1000"
      @select-change="handleSelectChang"
    >
      <template slot="format">
        <span>假装这是一张图片</span>
      </template>
      <template slot="option">
        <el-button type="text">按钮</el-button>
      </template>
    </Table>
  </div>
</template>

<script>
import search from "@/layout/component/search.vue";
import Table from "@/layout/component/table.vue";
export default {
  name: "ModelManage",
  components: { search, Table },
  data() {
    return {
      tableColumn: [
        {
          label: "格式",
          align: "center",
          slot: "format",
        },
        {
          label: "题名",
          prop: "title",
          align: "center",
          width: 260,
        },
        {
          label: "作者",
          prop: "author",
          align: "center",
        },
        {
          label: "发表时间",
          prop: "sendTime",
          align: "center",
          isTooltip: true,
        },
        {
          label: "收藏",
          prop: "collect",
          align: "center",
        },
        {
          label: "下载",
          prop: "download",
          align: "center",
        },
        {
          label: "操作",
          align: "center",
          slot: "option",
        },
      ],
      tableData: [
        {
          title: "大数据与物联网",
          author: "网络作者",
          sendTime: "2022-04-31 14:32:30",
          collect: "3",
          download: "0",
        },
        {
          title: "大数据与物联网",
          author: "网络作者",
          sendTime: "2022-04-31 14:32:30",
          collect: "3",
          download: "0",
        },
        {
          title: "大数据与物联网",
          author: "网络作者",
          sendTime: "2022-04-31 14:32:30",
          collect: "3",
          download: "0",
        },
        {
          title: "大数据与物联网",
          author: "网络作者",
          sendTime: "2022-04-31 14:32:30",
          collect: "3",
          download: "0",
        },
        {
          title: "大数据与物联网",
          author: "网络作者",
          sendTime: "2022-04-31 14:32:30",
          collect: "3",
          download: "0",
        },
        {
          title: "大数据与物联网",
          author: "网络作者",
          sendTime: "2022-04-31 14:32:30",
          collect: "3",
          download: "0",
        },
        {
          title: "大数据与物联网",
          author: "网络作者",
          sendTime: "2022-04-31 14:32:30",
          collect: "3",
          download: "0",
        },
        {
          title: "大数据与物联网",
          author: "网络作者",
          sendTime: "2022-04-31 14:32:30",
          collect: "3",
          download: "0",
        },
        {
          title: "大数据与物联网",
          author: "网络作者",
          sendTime: "2022-04-31 14:32:30",
          collect: "3",
          download: "0",
        },
        {
          title: "大数据与物联网",
          author: "网络作者",
          sendTime: "2022-04-31 14:32:30",
          collect: "3",
          download: "0",
        },
        {
          title: "大数据与物联网",
          author: "网络作者",
          sendTime: "2022-04-31 14:32:30",
          collect: "3",
          download: "0",
        },
        {
          title: "大数据与物联网",
          author: "网络作者",
          sendTime: "2022-04-31 14:32:30",
          collect: "3",
          download: "0",
        },
        {
          title: "大数据与物联网",
          author: "网络作者",
          sendTime: "2022-04-31 14:32:30",
          collect: "3",
          download: "0",
        },
        {
          title: "大数据与物联网",
          author: "网络作者",
          sendTime: "2022-04-31 14:32:30",
          collect: "3",
          download: "0",
        },
        {
          title: "大数据与物联网",
          author: "网络作者",
          sendTime: "2022-04-31 14:32:30",
          collect: "3",
          download: "0",
        },
      ],
      sortMethod: "默认排序",
      formatList: [],
    };
  },
  methods: {
    handleSelectChang(list) {
      console.log(list, "当前选中");
    },
    searchEnter(val) {
      console.log(val);
    },
  },
};
</script>

<style scoped>
.title {
  margin: 15px;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  align-items: center;
}

.search {
  width: 300px;
  height: 40px;
  border-radius: 18px;
  outline: none;
  border: 1px solid #157dff;
  padding-left: 20px;
}
.title1 {
  font-size: 36px;
  color: #157dff;
}
.upload {
  color: #157dff;
}
.right{
  margin: 15px;
  float: right;
}
</style>